<template>
  <div class="members-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2>会员管理</h2>
      <p>管理餐厅会员信息和会员权益</p>
    </div>

    <!-- 功能开发中提示 -->
    <div class="coming-soon-section">
      <el-card class="coming-soon-card">
        <div class="coming-soon-content">
          <div class="coming-soon-icon">
            <el-icon><Tools /></el-icon>
          </div>
          <h3>功能开发中</h3>
          <p>会员管理功能正在紧张开发中，敬请期待！</p>
          <div class="feature-list">
            <div class="feature-item">
              <el-icon class="feature-icon"><Check /></el-icon>
              <span>会员信息管理</span>
            </div>
            <div class="feature-item">
              <el-icon class="feature-icon"><Check /></el-icon>
              <span>会员等级设置</span>
            </div>
            <div class="feature-item">
              <el-icon class="feature-icon"><Check /></el-icon>
              <span>积分管理</span>
            </div>
            <div class="feature-item">
              <el-icon class="feature-icon"><Check /></el-icon>
              <span>会员优惠券</span>
            </div>
            <div class="feature-item">
              <el-icon class="feature-icon"><Check /></el-icon>
              <span>会员数据分析</span>
            </div>
          </div>
          <el-button type="primary" disabled>
            <el-icon><Clock /></el-icon>
            即将上线
          </el-button>
        </div>
      </el-card>
    </div>

    <!-- 预期功能展示 -->
    <div class="preview-section">
      <el-row :gutter="20">
        <el-col :xs="24" :md="8">
          <el-card class="preview-card">
            <div class="preview-icon member-info">
              <el-icon><User /></el-icon>
            </div>
            <h4>会员信息</h4>
            <p>完整的会员档案管理，包括基本信息、消费记录、偏好设置等</p>
          </el-card>
        </el-col>
        
        <el-col :xs="24" :md="8">
          <el-card class="preview-card">
            <div class="preview-icon member-level">
              <el-icon><Trophy /></el-icon>
            </div>
            <h4>会员等级</h4>
            <p>灵活的会员等级体系，根据消费金额自动升级，享受不同权益</p>
          </el-card>
        </el-col>
        
        <el-col :xs="24" :md="8">
          <el-card class="preview-card">
            <div class="preview-icon member-points">
              <el-icon><Coin /></el-icon>
            </div>
            <h4>积分系统</h4>
            <p>完善的积分获取和消费机制，提升客户黏性和复购率</p>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  Tools,
  Check,
  Clock,
  User,
  Trophy,
  Coin
} from '@element-plus/icons-vue'
</script>

<style scoped>
.members-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* 页面标题 */
.page-header {
  margin-bottom: 32px;
}

.page-header h2 {
  margin: 0 0 8px 0;
  color: #303133;
  font-size: 24px;
  font-weight: 600;
}

.page-header p {
  margin: 0;
  color: #606266;
  font-size: 14px;
}

/* 开发中提示 */
.coming-soon-section {
  margin-bottom: 32px;
}

.coming-soon-card {
  border-radius: 16px;
  border: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
}

.coming-soon-card :deep(.el-card__body) {
  padding: 48px 32px;
}

.coming-soon-content {
  text-align: center;
}

.coming-soon-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px auto;
  font-size: 32px;
}

.coming-soon-content h3 {
  margin: 0 0 16px 0;
  font-size: 28px;
  font-weight: 600;
}

.coming-soon-content > p {
  margin: 0 0 32px 0;
  font-size: 16px;
  opacity: 0.9;
}

.feature-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.feature-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  font-size: 14px;
}

.feature-icon {
  margin-right: 8px;
  color: #67c23a;
}

/* 功能预览 */
.preview-section {
  margin-bottom: 32px;
}

.preview-card {
  border-radius: 12px;
  border: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  margin-bottom: 16px;
  text-align: center;
  transition: transform 0.3s ease;
}

.preview-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.preview-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px auto;
  font-size: 24px;
  color: white;
}

.member-info {
  background: linear-gradient(135deg, #667eea, #764ba2);
}

.member-level {
  background: linear-gradient(135deg, #f093fb, #f5576c);
}

.member-points {
  background: linear-gradient(135deg, #4facfe, #00f2fe);
}

.preview-card h4 {
  margin: 0 0 12px 0;
  color: #303133;
  font-size: 18px;
  font-weight: 600;
}

.preview-card p {
  margin: 0;
  color: #606266;
  font-size: 14px;
  line-height: 1.6;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-header h2 {
    font-size: 20px;
  }
  
  .coming-soon-content h3 {
    font-size: 24px;
  }
  
  .coming-soon-card :deep(.el-card__body) {
    padding: 32px 20px;
  }
  
  .feature-list {
    grid-template-columns: 1fr;
  }
}
</style> 